<template>
  <div>
    <div class="header">
      <!-- <div class="left-icon">
        <span class="iconfont icon-list-copy"></span>
      </div> -->
      <router-link to="/newcategory" tag="div" class="left-icon">
        <span class="iconfont icon-list-copy"></span>
      </router-link>
      <div class="centre-inp" @click="goSearch">
        <input type="text" placeholder="鞋子" />
        <span class="iconfont icon-soushuo1"></span>
      </div>
      <div class="right-icon" @click="$router.push('/shoppingCar')">
        <span class="iconfont icon-xiaoxi"></span>
      </div>
    </div>
    <div class="occupy"></div>
  </div>
</template>

<script>
export default {
  methods:{
    goSearch(){
      this.$router.push("/searchList")
    }
  }
}
</script>


<style lang="less" scoped>
    .occupy{
      width: 100%;
      height: 75px;
    }
    // 搜索导航
    @height:50px;
    .header{
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 999;
        display: flex;
        height: @height;
        padding: 12px 8px;
        border-bottom: 1px solid #E5E5E5;
        background: #fff;
        .centre-inp{
            flex: 4;
            height: 100%;
            position: relative;
            color: #999;
            input{
                outline: none;
                border: none;
                background: #eee;
                width: 100%;
                height: 100%;
                text-indent: 3em;
                font-size: 16px;
                border-radius: 6px;
            }
            span{
                position: absolute;
                top: 50%;
                left: 20px;
                font-size: 20px;
                margin-top: -12px;
            }
        }
        .left-icon,.right-icon{
            flex: 1;
            height: 100%;
            line-height: @height;
            text-align: center;
            .iconfont{
                font-size: 30px;
                color: #9B9B9B;
            }
        }
    }
</style>
